<template>
  <div class="campus-simulator">
    <div class="header">
      <h1>🇬🇧 Emma's School Day</h1>
      <div class="stats">
        <span>Time: {{ formatTime(currentTime) }}</span>
        <span>Energy: {{ energy }}/100</span>
        <span>Knowledge: {{ knowledge }}</span>
        <span>Happiness: {{ happiness }}/100</span>
      </div>
    </div>

    <div class="main-content">
      <div class="location-display" v-if="currentLocation">
        <h2>{{ currentLocation.name }}</h2>
        <p>{{ currentLocation.description }}</p>
      </div>

      <div class="action-panel" v-if="currentLocation">
        <div class="location-buttons">
          <button 
            v-for="location in locations" 
            :key="location.id"
            @click="moveToLocation(location)"
            :class="{ active: currentLocation.id === location.id }"
            class="location-btn"
          >
            {{ location.name }}
          </button>
        </div>

        <div class="action-buttons">
          <button 
            v-for="action in currentLocation.actions" 
            :key="action.id"
            @click="performAction(action)"
            :disabled="energy < action.energyCost"
            class="action-btn"
          >
            {{ action.name }}
            <span class="energy-cost">-{{ action.energyCost }} energy</span>
          </button>
        </div>
      </div>

      <div class="activity-log">
        <h3>📝 Daily Diary</h3>
        <div class="log-entries">
          <div v-for="(entry, index) in activityLog" :key="index" class="log-entry">
            <span class="time">{{ formatTime(entry.time) }}</span>
            <span class="message">{{ entry.message }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button @click="restartGame" class="restart-btn">Start New Day</button>
      <button @click="goHome" class="home-btn">Back to Home</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CampusSimulator',
  data() {
    return {
      currentTime: 7 * 60, // 7:00 AM in minutes
      energy: 100,
      knowledge: 0,
      happiness: 80,
      currentLocation: {
        id: 'bedroom',
        name: '🏠 Bedroom',
        description: 'Cozy bedroom in a Victorian house. Time to start the day!',
        actions: [
          { id: 'wake_up', name: 'Wake Up', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 5 } },
          { id: 'get_dressed', name: 'Get Dressed', energyCost: 5, effect: { energy: -5, knowledge: 0, happiness: 3 } },
          { id: 'pack_bag', name: 'Pack School Bag', energyCost: 3, effect: { energy: -3, knowledge: 0, happiness: 2 } }
        ]
      },
      locations: [
        {
          id: 'bedroom',
          name: '🏠 Bedroom',
          description: 'Cozy bedroom in a Victorian house. Time to start the day!',
          actions: [
            { id: 'wake_up', name: 'Wake Up', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 5 } },
            { id: 'get_dressed', name: 'Get Dressed', energyCost: 5, effect: { energy: -5, knowledge: 0, happiness: 3 } },
            { id: 'pack_bag', name: 'Pack School Bag', energyCost: 3, effect: { energy: -3, knowledge: 0, happiness: 2 } }
          ]
        },
        {
          id: 'kitchen',
          name: '🍳 Kitchen',
          description: 'Warm kitchen with the smell of breakfast. Mum is making tea and toast.',
          actions: [
            { id: 'have_breakfast', name: 'Have Breakfast', energyCost: 0, effect: { energy: 25, knowledge: 0, happiness: 8 } },
            { id: 'make_tea', name: 'Make Tea', energyCost: 2, effect: { energy: -2, knowledge: 0, happiness: 5 } },
            { id: 'chat_family', name: 'Chat with Family', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 10 } }
          ]
        },
        {
          id: 'bus_stop',
          name: '🚌 Bus Stop',
          description: 'Waiting for the red double-decker bus to school. Meeting friends here.',
          actions: [
            { id: 'wait_bus', name: 'Wait for Bus', energyCost: 2, effect: { energy: -2, knowledge: 0, happiness: 3 } },
            { id: 'chat_friends', name: 'Chat with Friends', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 8 } },
            { id: 'read_book', name: 'Read Book', energyCost: 3, effect: { energy: -3, knowledge: 5, happiness: 2 } }
          ]
        },
        {
          id: 'classroom',
          name: '📚 Classroom',
          description: 'Bright classroom with wooden desks. Learning Maths, English, and Science.',
          actions: [
            { id: 'attend_maths', name: 'Maths Lesson', energyCost: 15, effect: { energy: -15, knowledge: 12, happiness: 3 } },
            { id: 'attend_english', name: 'English Lesson', energyCost: 12, effect: { energy: -12, knowledge: 15, happiness: 5 } },
            { id: 'attend_science', name: 'Science Lab', energyCost: 18, effect: { energy: -18, knowledge: 18, happiness: 8 } },
            { id: 'ask_question', name: 'Ask Questions', energyCost: 5, effect: { energy: -5, knowledge: 8, happiness: 5 } }
          ]
        },
        {
          id: 'library',
          name: '📖 Library',
          description: 'Quiet library with old books. Perfect for studying and reading.',
          actions: [
            { id: 'study_homework', name: 'Do Homework', energyCost: 20, effect: { energy: -20, knowledge: 15, happiness: 3 } },
            { id: 'read_novel', name: 'Read Novel', energyCost: 8, effect: { energy: -8, knowledge: 8, happiness: 10 } },
            { id: 'research_project', name: 'Research Project', energyCost: 25, effect: { energy: -25, knowledge: 20, happiness: 5 } }
          ]
        },
        {
          id: 'canteen',
          name: '🍽️ School Canteen',
          description: 'School canteen serving fish & chips, shepherd\'s pie, and pudding.',
          actions: [
            { id: 'have_lunch', name: 'Have Lunch', energyCost: 0, effect: { energy: 35, knowledge: 0, happiness: 8 } },
            { id: 'eat_pudding', name: 'Eat Pudding', energyCost: 0, effect: { energy: 5, knowledge: 0, happiness: 12 } },
            { id: 'socialize_lunch', name: 'Socialize', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 15 } }
          ]
        },
        {
          id: 'playground',
          name: '⚽ Playground',
          description: 'Large playground with football pitch. Break time activities.',
          actions: [
            { id: 'play_football', name: 'Play Football', energyCost: 20, effect: { energy: -20, knowledge: 2, happiness: 15 } },
            { id: 'play_hopscotch', name: 'Hopscotch', energyCost: 10, effect: { energy: -10, knowledge: 1, happiness: 12 } },
            { id: 'chat_break', name: 'Chat with Friends', energyCost: 0, effect: { energy: 0, knowledge: 0, happiness: 10 } }
          ]
        },
        {
          id: 'art_room',
          name: '🎨 Art Room',
          description: 'Creative art room with paints, clay, and craft materials.',
          actions: [
            { id: 'paint_picture', name: 'Paint Picture', energyCost: 15, effect: { energy: -15, knowledge: 8, happiness: 18 } },
            { id: 'make_craft', name: 'Make Craft', energyCost: 12, effect: { energy: -12, knowledge: 6, happiness: 15 } },
            { id: 'draw_sketch', name: 'Draw Sketch', energyCost: 8, effect: { energy: -8, knowledge: 5, happiness: 12 } }
          ]
        },
        {
          id: 'music_room',
          name: '🎵 Music Room',
          description: 'Music room with piano, guitars, and choir practice.',
          actions: [
            { id: 'play_piano', name: 'Play Piano', energyCost: 15, effect: { energy: -15, knowledge: 10, happiness: 20 } },
            { id: 'sing_choir', name: 'Sing in Choir', energyCost: 10, effect: { energy: -10, knowledge: 8, happiness: 18 } },
            { id: 'learn_guitar', name: 'Learn Guitar', energyCost: 18, effect: { energy: -18, knowledge: 12, happiness: 15 } }
          ]
        },
        {
          id: 'garden',
          name: '🌺 School Garden',
          description: 'Beautiful school garden with flowers and vegetables. Gardening club.',
          actions: [
            { id: 'water_plants', name: 'Water Plants', energyCost: 8, effect: { energy: -8, knowledge: 3, happiness: 12 } },
            { id: 'plant_seeds', name: 'Plant Seeds', energyCost: 12, effect: { energy: -12, knowledge: 5, happiness: 15 } },
            { id: 'enjoy_garden', name: 'Enjoy Garden', energyCost: 0, effect: { energy: 5, knowledge: 0, happiness: 10 } }
          ]
        }
      ],
      activityLog: []
    }
  },
  mounted() {
    this.addLogEntry('Good morning! Emma wakes up in her cozy bedroom.');
    this.startTime();
  },
  methods: {
    formatTime(minutes) {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      return `${hours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`;
    },
    moveToLocation(location) {
      this.currentLocation = location;
      this.addLogEntry(`Emma goes to ${location.name.toLowerCase()}`);
    },
    performAction(action) {
      if (this.energy < action.energyCost) {
        this.addLogEntry('Emma is too tired to do this activity.');
        return;
      }

      this.energy += action.effect.energy;
      this.knowledge += action.effect.knowledge;
      this.happiness += action.effect.happiness;
      this.currentTime += 30; // Each action takes 30 minutes

      // Limit values
      this.energy = Math.max(0, Math.min(100, this.energy));
      this.knowledge = Math.max(0, this.knowledge);
      this.happiness = Math.max(0, Math.min(100, this.happiness));

      // Create action-specific messages
      const messages = {
        wake_up: 'Emma stretches and gets ready for the day.',
        get_dressed: 'Emma puts on her school uniform - white blouse, navy skirt, and tie.',
        pack_bag: 'Emma packs her school bag with books and lunch.',
        have_breakfast: 'Emma enjoys a traditional English breakfast with tea and toast.',
        make_tea: 'Emma makes a proper cup of English tea.',
        chat_family: 'Emma chats with her family about the day ahead.',
        wait_bus: 'Emma waits for the red double-decker bus.',
        chat_friends: 'Emma chats with her school friends at the bus stop.',
        read_book: 'Emma reads her favourite book while waiting.',
        attend_maths: 'Emma learns about algebra and geometry in Maths class.',
        attend_english: 'Emma studies Shakespeare and creative writing in English.',
        attend_science: 'Emma does exciting experiments in the Science lab.',
        ask_question: 'Emma asks thoughtful questions in class.',
        study_homework: 'Emma works hard on her homework assignments.',
        read_novel: 'Emma reads a classic English novel.',
        research_project: 'Emma researches for her history project.',
        have_lunch: 'Emma enjoys fish & chips in the school canteen.',
        eat_pudding: 'Emma has a delicious sticky toffee pudding.',
        socialize_lunch: 'Emma chats and laughs with friends during lunch.',
        play_football: 'Emma plays football with her classmates.',
        play_hopscotch: 'Emma plays hopscotch with her friends.',
        chat_break: 'Emma chats with friends during break time.',
        paint_picture: 'Emma creates a beautiful watercolour painting.',
        make_craft: 'Emma makes a lovely craft project.',
        draw_sketch: 'Emma draws a detailed sketch.',
        play_piano: 'Emma plays a beautiful piece on the piano.',
        sing_choir: 'Emma sings in the school choir.',
        learn_guitar: 'Emma learns to play the guitar.',
        water_plants: 'Emma waters the flowers in the school garden.',
        plant_seeds: 'Emma plants new seeds in the garden.',
        enjoy_garden: 'Emma enjoys the peaceful school garden.'
      };

      const message = messages[action.id] || `Emma ${action.name.toLowerCase()}.`;
      this.addLogEntry(message);

      // Check for day end
      if (this.currentTime >= 17 * 60) { // 5:00 PM
        this.addLogEntry('School day is over! Time to go home.');
        this.endDay();
      }
    },
    addLogEntry(message) {
      this.activityLog.unshift({
        time: this.currentTime,
        message: message
      });
      if (this.activityLog.length > 10) {
        this.activityLog = this.activityLog.slice(0, 10);
      }
    },
    startTime() {
      this.timeInterval = setInterval(() => {
        this.currentTime += 1;
        if (this.currentTime >= 24 * 60) {
          this.currentTime = 0;
        }
      }, 1000);
    },
    endDay() {
      clearInterval(this.timeInterval);
      this.addLogEntry(`Emma had a wonderful day! She gained ${this.knowledge} knowledge points and her happiness is ${this.happiness}/100.`);
    },
    restartGame() {
      this.currentTime = 7 * 60;
      this.energy = 100;
      this.knowledge = 0;
      this.happiness = 80;
      this.currentLocation = this.locations[0];
      this.activityLog = [];
      this.addLogEntry('Good morning! Emma wakes up in her cozy bedroom.');
      this.startTime();
    },
    goHome() {
      this.$router.push('/');
    }
  },
  beforeUnmount() {
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }
  }
}
</script>

<style scoped>
.campus-simulator {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Georgia', serif;
  background: linear-gradient(135deg, #e8f4f8 0%, #d4e6f1 100%);
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  background: white;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #f8f9fa;
}

.header h1 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 2.8em;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.stats {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  flex-wrap: wrap;
}

.stats span {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  padding: 10px 18px;
  border-radius: 25px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.main-content {
  display: grid;
  gap: 25px;
  margin-bottom: 30px;
}

.location-display {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 2px solid #f8f9fa;
}

.location-display h2 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 2em;
  font-weight: bold;
}

.location-display p {
  margin: 0;
  color: #7f8c8d;
  font-size: 1.2em;
  line-height: 1.6;
}

.action-panel {
  display: grid;
  gap: 25px;
}

.location-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.location-btn {
  background: linear-gradient(135deg, #ecf0f1, #bdc3c7);
  border: none;
  padding: 18px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  color: #2c3e50;
  transition: all 0.3s ease;
  font-size: 1.1em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.location-btn:hover {
  background: linear-gradient(135deg, #bdc3c7, #95a5a6);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.location-btn.active {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  transform: translateY(-2px);
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.action-btn {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  border: none;
  padding: 20px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 1.1em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.action-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #27ae60, #229954);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.action-btn:disabled {
  background: linear-gradient(135deg, #bdc3c7, #95a5a6);
  cursor: not-allowed;
  transform: none;
}

.energy-cost {
  font-size: 0.9em;
  opacity: 0.9;
}

.activity-log {
  background: white;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #f8f9fa;
}

.activity-log h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.5em;
  font-weight: bold;
}

.log-entries {
  max-height: 250px;
  overflow-y: auto;
}

.log-entry {
  display: flex;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #ecf0f1;
  font-size: 1.1em;
  line-height: 1.5;
}

.log-entry:last-child {
  border-bottom: none;
}

.time {
  color: #7f8c8d;
  font-size: 1em;
  min-width: 70px;
  font-weight: bold;
}

.message {
  color: #2c3e50;
  flex: 1;
}

.controls {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.restart-btn, .home-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
  font-size: 1.1em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.restart-btn:hover, .home-btn:hover {
  background: linear-gradient(135deg, #c0392b, #a93226);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.home-btn {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.home-btn:hover {
  background: linear-gradient(135deg, #8e44ad, #7d3c98);
}

@media (max-width: 600px) {
  .campus-simulator {
    padding: 15px;
  }
  
  .header h1 {
    font-size: 2.2em;
  }
  
  .stats {
    flex-direction: column;
    align-items: center;
  }
  
  .location-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .action-buttons {
    grid-template-columns: 1fr;
  }
  
  .location-display {
    padding: 20px;
  }
  
  .location-display h2 {
    font-size: 1.6em;
  }
}
</style> 